<template>
  <div class="mainsu">
    <div class="main_spac1">
      <div class="main_white padding10 paddingBottom20">
        <div class="mainor_form small-top">
          <el-form
            :inline="true"
            :model="form"
            class="demo-form-inline"
            ref="userListFrom"
            label-width="90px"
            id="form"
          >
            <el-form-item label="商品分类：" prop="category_id" class="wid220">
              <el-cascader
                v-model="form.category_id"
                :options="options"
                :props="defaultProps"
                @change="getArticleList"
              ></el-cascader>
            </el-form-item>
            <el-form-item label="商品：" prop="goods_spu_id">
              <change-goods-input
                ref="changeGoodsInput"
                isInventory
                @clear="
                  () => {
                    this.form.goods_spu_id = '';
                  }
                "
                @sendValue="
                  (data) => {
                    this.form.goods_spu_id = data.id;
                  }
                "
              ></change-goods-input>
            </el-form-item>
            <el-form-item label="状态：" prop="status">
              <el-select
                v-model.trim="form.status"
                placeholder="状态"
                class="wid220"
                @change="getArticleList"
              >
                <el-option label="所有" value=""></el-option>
                <el-option
                  v-for="(statusList, index) in list.statusList"
                  :key="index"
                  :label="statusList"
                  :value="index + 1"
                ></el-option>
              </el-select>
            </el-form-item>
            <MainFormBtn @reset="reset" @getSearchFor="getArticleList" :loading="listLoading" :showBtn="false">
              <el-button @click="importDialog">导入</el-button>
            </MainFormBtn>
          </el-form>
        </div>
        <div class="main-controls-wrap">
          <div>
            <router-link to="/warehouse/stock/quick"><el-button> 快捷设置</el-button></router-link>
          </div>
        </div>
        <div class="main_table">
          <el-table
            ref="multipleTable"
            v-loading="listLoading"
            :data="list.list.data"
            element-loading-text="加载中"
            fit
            border
            highlight-current-row
            :header-cell-class-name="this.$verticaline"
            :height="borderHeight"
            :header-cell-style="tableHeightStyle"
            @header-dragend="changeTableWidth"
          >
            <el-table-column
              label="商品名称"
              prop="goods.name"
              :width="tableWidth[hash + 'goods.name']"
            >
              <template slot-scope="scope">
                {{ scope.row.goods.name }}【{{
                  scope.row.spu_name ? scope.row.spu_name.title : ""
                }}】</template
              ></el-table-column
            >

            <el-table-column
              label="SKU编码"
              prop="goods_spu_code"
              :width="tableWidth[hash + 'goods_spu_code']"
            />
            <el-table-column
              label="单位"
              prop="spu_unit.title"
              :width="tableWidth[hash + 'spu_unit.title']"
            />
            <el-table-column
              label="状态"
              prop="status"
              :width="tableWidth[hash + 'status']"
            >
              <template slot-scope="scope"
                ><span
                  :class="
                    scope.row.inventory
                      ? scope.row.inventory.opening_status == 1
                        ? 'order1'
                        : 'order2'
                      : 'order2'
                  "
                  >{{
                    scope.row.inventory
                      ? scope.row.inventory.opening_status == 1
                        ? "已设置"
                        : "未设置"
                      : "未设置"
                  }}</span
                ></template
              >
            </el-table-column>
            <el-table-column
              label="期初库存"
              prop="opening_num"
              :width="tableWidth[hash + 'opening_num']"
            >
              <template
                slot-scope="scope"
                v-if="
                  scope.row.inventory
                    ? scope.row.inventory.opening_status == 1
                      ? true
                      : false
                    : false
                "
                >{{
                  scope.row.inventory ? scope.row.inventory.opening_num : ""
                }}</template
              >
            </el-table-column>
            <el-table-column
              label="期初进价"
              prop="opening_price"
              :width="tableWidth[hash + 'opening_price']"
            >
              <template
                slot-scope="scope"
                v-if="
                  scope.row.inventory
                    ? scope.row.inventory.opening_status == 1
                      ? true
                      : false
                    : false
                "
                >{{
                  scope.row.inventory ? scope.row.inventory.opening_price : ""
                }}</template
              >
            </el-table-column>
            <el-table-column
              label="期初金额"
              prop="opening_money"
              :width="tableWidth[hash + 'opening_money']"
            >
              <template
                slot-scope="scope"
                v-if="
                  scope.row.inventory
                    ? scope.row.inventory.opening_status == 1
                      ? true
                      : false
                    : false
                "
                >{{
                  scope.row.inventory ? scope.row.inventory.opening_money : ""
                }}</template
              >
            </el-table-column>
          </el-table>
        </div>
        <div class="main_page boxdq">
          <div></div>
          <!-- 分页 -->
          <div class="main_page_r">
            <MainPagination
              :current-page="current.page"
              :page-sizes="[20, 30, 50, 100]"
              :page-size="limit"
              layout="total, sizes, prev, pager, next, jumper"
              :total="totalCount"
              background
              @size-change="changeLimit"
              @current-change="changePage"
            />
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      title="期初库存导入"
      :visible.sync="importbuVisible"
      class="main_dialog dialog700 importbu"
    >
      <div class="importbu_p">
        <h3>导入说明：</h3>
        <p>1.注意使用红色字体标注的必填字段,不填或错填将导致导入失败。</p>
        <p>2.导入文件仅支持xlsx格式,大小不超过2M ,数据不超过2000行。</p>
        <p>3.导入文件不能包含“合并单元格”，否则无法导入。</p>
        <p>
          4.导入时碰到数据不正确的行，系统会跳过错误的行继续执行未完成的行。
        </p>
      </div>
      <div class="importbu_an box">
        <el-button class="marginRight10" v-repeatClick @click="downTemplate"
          >下载模板</el-button
        >
        <el-upload
          class="upload-demo"
          :action="warehouse_stock_import"
          :on-success="importSuccess"
          :on-error="importerr"
          :show-file-list="false"
          :data="import_params"
          :headers="{
            Authorization: getToken(),
          }"
        >
          <!-- :before-upload="beforeUpload" -->
          <el-button
            size="small"
            type="primary"
            v-repeatClick
            @click="handleUpload"
            >点击上传</el-button
          >
        </el-upload>

        <p v-if="import_file_name ? true : false">
          上传文件名：{{ import_file_name }}
        </p>
      </div>
      <div class="import_process" v-if="percentShow">
        <div class="progress">
          <el-progress
            :text-inside="true"
            :stroke-width="20"
            :percentage="percent"
            color="#19B098"
          ></el-progress>
        </div>
        <div class="notice" v-if="percentShow">
          <div class="importtips">
            <p class="success" v-if="percent == 100">期初库存导入结束</p>
            <div v-for="(item, index) in reverseSum" :key="index">
              <p v-if="item.type == 2" :key="index" class="fail">
                {{ item.name }}，导入失败
              </p>
            </div>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button :disabled="cancelDisabled" @click="importbuVisible = false"
          >取 消</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { mixins } from "@/mixins/index.js";
import {
  opening_index,
  opening_importModel,
} from "@/api/warehouse/warehouseStock";
import { apiUrl, objKeySort, Md5 } from "@/utils/public";
import { exportMethod } from "@/utils/index";
import { recursion, category } from "@/utils/index";
import { warehouse_stock_import } from "@/api/currency";
import { mapGetters } from "vuex";

export default {
  mixins: [mixins],
  components: {},
  data() {
    return {
      exportMethod,
      // 分页
      current: {
        page: 1,
        per_page: 20,
      },
      limit: 20,
      totalCount: 1,
      // 列表数据
      list: {
        list: [],
      },
      listLoading: false,
      // 搜索
      form: {
        pid: "",
        category_id: [],
        status: null,
        goods_spu_id: "",
      },
      // 分类
      options: [],
      defaultProps: {
        children: "selfNext",
        label: "title",
        value: "id",
        checkStrictly: true,
      },
      // 订单导入
      warehouse_stock_import: warehouse_stock_import,
      importbuVisible: false,
      import_form: {
        user_type: 1,
        goods_type: 1,
        start_line_num: 2,
        end_line_num: "",
      },
      import_file_name: "",
      import_params: {},
      percent_gs: 0,
      percent: 0,
      percentShow: false,
      percent_list: [],
      importArrLength: 1,
      cancelDisabled: false,
    };
  },
  created() {
    // 列表
    this.getNumerical(170);
    this.opening_index();
  },
  computed: {
    ...mapGetters(["userInfo", "avatar"]),
    reverseSum() {
      return this.percent_list;
    },
  },
  mounted() {
    window.Echo.channel("importOpening." + this.avatar.company_id).listen(
      "ImportOpeningEvent",
      (e) => {
        this.cancelDisabled = true;
        this.importArrLength = e.notice.count;
        this.percentShow = true;
        if (e.notice.code == 0) {
          this.percent_list.push({
            num: this.percent,
            type: 1,
            name: e.notice.msg,
          });
        } else if (e.notice.code == 100) {
          this.percent_list.push({
            num: this.percent,
            type: 2,
            name: e.notice.msg,
          });
        }
        this.percent_gs = parseInt(this.percent_gs) + 1;
        if ((this.percent_gs / this.importArrLength) * 100 >= 100) {
          this.percent = 100;
          this.cancelDisabled = false;
          this.getArticleList();
          return;
        }
        this.percent =
          this.percent_gs / this.importArrLength
            ? parseInt((this.percent_gs / this.importArrLength) * 100)
            : 0;
      }
    );
  },
  methods: {
    reset() {
      this.$refs['userListFrom'].resetFields();
      this.$refs['changeGoodsInput'].name = '';
      this.opening_index()
    },
    startGetting() {
      this.getArticleList();
    },
    // 搜索
    getArticleList() {
      this.current.page = 1;
      this.opening_index();
    },
    // 分页
    changeLimit(pageSize) {
      this.current.per_page = pageSize;
      this.opening_index();
    },
    changePage(page) {
      this.current.page = page;
      this.opening_index();
    },
    // 列表
    opening_index() {
      this.listLoading = true;
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(
              Object.assign(apiUrl().name, this.list_form(), this.current)
            ) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        this.list_form(),
        this.current
      );
      opening_index(data).then((res) => {
        this.listLoading = false;
        if (res.errcode == 0) {
          this.options = recursion(res.data.categoryList, true);
          this.list = res.data;
          this.totalCount = res.data.list.total;
        } else {
          this.$message.error(res.errmsg);
        }
      });
    },
    list_form() {
      let form = JSON.parse(JSON.stringify(this.form));
      form.pid = form.category_id[0] ? form.category_id[0] : "";
      form.category_id = category(form.category_id);

      return form;
    },
    // 导入订单
    importDialog() {
      this.import_file_name = "";
      this.percent_gs = 0;
      this.percent = 0;
      this.percentShow = false;
      this.percent_list = [];
      this.importArrLength = 1;
      this.cancelDisabled = false;
      this.importbuVisible = true;
    },
    // 下载模板
    downTemplate() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name
      );
      const notify = this.$notify.info({
        title: "开始导出...",
        type: "success",
        duration: 0,
      });
      opening_importModel(data).then((res) => {
        this.exportMethod(res, "期初库存导入模板", notify);
      });
    },
    importerr(err, file, fileList) {
      this.$message.error("上传失败");
    },
    importSuccess(response, file, fileList) {
      if (response.errcode != 0) {
        this.$message.error(response.errmsg);
        return;
      }
      this.import_file_name = file.name;
    },
    handleUpload() {
      let data = Object.assign(
        {
          sign: Md5(
            objKeySort(Object.assign(apiUrl().name)) + apiUrl().appsecret
          ),
        },
        apiUrl().name,
        { uid: this.userInfo.id }
      );
      this.import_params = data;
    },
    // beforeUpload(file) {
    // 	const isLt2M = file.size / 1024 / 1024 < 1;
    // 	if (!isLt2M) {
    // 		this.$message.error("上传商品图片大小不能超过 1MB!");
    // 	}
    // 	return isLt2M;
    // },
  },
};
</script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";

.mainsu {
  .mainor_form form {
    width: calc(100% - 180px);
  }
}

// 支付状态
.success {
  color: $green;
}
.unpaid {
  color: $colour_red;
}
// 订单状态
.order0 {
  color: $order_color1;
}
.order1 {
  color: $order_color2;
}
.order2 {
  color: $order_color4;
}
.order3 {
  color: $order_color4;
}
.import_process {
  width: 100%;
}

.progress {
  padding: 15px 40px 15px 0;
}
.notice {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding-right: 40px;
  .importtips {
    overflow-y: auto;
    width: 100%;
    height: 84px;
    height: 84px;
    background: #ffffff;
    border: 1px solid #d8d8d8;
    padding: 10px 15px;
    .fail {
      color: #ff5a5a;
      line-height: 1.2;
      font-size: 12px;
    }
    .success {
      color: #19b098;
      line-height: 1.2;
      font-size: 12px;
    }
  }
}
.importbu_in {
  /deep/ .el-input__inner {
    padding-right: 0;
  }
}
.user_cell_cox {
  display: flex;
  align-items: center;
}
.label-pic {
  width: 16px;
  height: 20px;
  margin-right: 6px;
  margin-top: 2px;
}
.item-label {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.item-label span {
  height: auto;
  padding: 4px 10px;
  border: 1px solid #e6a23c;
  color: #e6a23c;
  margin-bottom: 5px;
  border-radius: 3px;
  margin-right: 10px;
}

/deep/ .el-form-item--small.el-form-item {
  margin-bottom: 10px !important;
}
</style>
